<template>
  <div class="DcnBottom">
    <CodeCard v-bind="btnDesc">
      <sdn-time-select v-model="value" :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }" placeholder="选择时间"></sdn-time-select>

    </CodeCard>
  </div>
</template>

<script>

import {ref} from 'vue'

export default {
  components: {
    
  },
  data() {
    return {
      value: ''
    };
  },
  setup() {

    let btnDesc = {
      title: "TimePicker 时间选择器",
      describe: "用于选择或输入时间",
      codeBlock: `<sdn-time-select v-model="value" :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }" placeholder="选择时间"></sdn-time-select>`,
      attrs: [{
        "name": "value / v-model",
        "describe": "绑定值",
        "type": "date(TimePicker) / string(TimeSelect)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "readonly",
        "describe": "完全只读",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "disabled",
        "describe": "禁用",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "editable",
        "describe": "文本框可输入",
        "type": "boolean",
        "emun": "—",
        "default": "TRUE"
      }, {
        "name": "clearable",
        "describe": "是否显示清除按钮",
        "type": "boolean",
        "emun": "—",
        "default": "TRUE"
      }, {
        "name": "size",
        "describe": "输入框尺寸",
        "type": "string",
        "emun": "medium / small / mini",
        "default": "—"
      }, {
        "name": "placeholder",
        "describe": "非范围选择时的占位内容",
        "type": "string",
        "emun": "—",
        "default": "—"
      }, {
        "name": "start-placeholder",
        "describe": "范围选择时开始日期的占位内容",
        "type": "string",
        "emun": "—",
        "default": "—"
      }, {
        "name": "end-placeholder",
        "describe": "范围选择时开始日期的占位内容",
        "type": "string",
        "emun": "—",
        "default": "—"
      }, {
        "name": "is-range",
        "describe": "是否为时间范围选择，仅对<el-time-picker>有效",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "arrow-control",
        "describe": "是否使用箭头进行时间选择，仅对<el-time-picker>有效",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "align",
        "describe": "对齐方式",
        "type": "string",
        "emun": "left / center / right",
        "default": "left"
      }, {
        "name": "popper-class",
        "describe": "TimePicker 下拉框的类名",
        "type": "string",
        "emun": "—",
        "default": "—"
      }, {
        "name": "picker-options",
        "describe": "当前时间日期选择器特有的选项参考下表",
        "type": "object",
        "emun": "—",
        "default": "{}"
      }, {
        "name": "range-separator",
        "describe": "选择范围时的分隔符",
        "type": "string",
        "emun": "-",
        "default": "'-'"
      }, {
        "name": "value-format",
        "describe": "可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象",
        "type": "string",
        "emun": "见日期格式",
        "default": "—"
      }, {
        "name": "default-value",
        "describe": "可选，选择器打开时默认显示的时间",
        "type": "Date(TimePicker) / string(TimeSelect)",
        "emun": "可被new Date()解析(TimePicker) / 可选值(TimeSelect)",
        "default": "—"
      }, {"name": "name", "describe": "原生属性", "type": "string", "emun": "—", "default": "—"}, {
        "name": "prefix-icon",
        "describe": "自定义头部图标的类名",
        "type": "string",
        "emun": "—",
        "default": "el-icon-time"
      }, {
        "name": "clear-icon",
        "describe": "自定义清空图标的类名",
        "type": "string",
        "emun": "—",
        "default": "el-icon-circle-close"
      }],
      events: [{"name": "change", "describe": "用户确认选定的值时触发", "params": "组件绑定值"}, {
        "name": "blur",
        "describe": "当 input 失去焦点时触发",
        "params": "组件实例"
      }, {"name": "focus", "describe": "当 input 获得焦点时触发", "params": "组件实例"}],
      methods: [
        {"name": "focus", "describe": "使 input 获取焦点", "params": "—"}],
      slots: []
    };
    return {
      btnDesc
    };
  },
};
</script>

<style lang="stylus">
.DcnBottom {
  .DcnDatePicker {
    display flex
    justify-content space-around

    .block {
      display flex
      justify-content center
      align-items center
      flex-direction column
      margin-bottom 0.2rem

      .demonstration {
        padding-bottom 0.2rem
        color #666666
      }
    }
  }

}
</style>
